<template>
	<view :class="[primarySize()]">
		
		<view class="page-foot bg-white" v-if="group_id!=2">
			<view class="flex-box detail_footer">
				<button @click="shareTip" hover-class="none" class="footer_img1">
					<image src="/static/public/share.png" class="img"></image>
					<view class="text">分享</view>
				</button>
				<view class="footer_img1 ml30" @click="bindToggleFav">
					<image :src="iconPath(isFav?'fav_sc.png':'fav.png')" class="img"></image>
					<view class="text">{{isFav?'已':''}}收藏</view>
				</view>
				<button hover-class="none" class="zbtn1 flex-grow-1" @click="bindContact()">立即沟通</button>
				<button hover-class="none" :disabled="isApplying" class="zbtn2 flex-grow-1"
					@click="bindApply()">{{isApplying?'已投递':'投递简历'}}</button>
			</view>
		</view>
		<view class="container">

			<view class="top_bg">
			</view>
			<view class="pr z2 pt20 plr30">
				<view class="post_info">
					<view class="flex-box">
						<view class="fwb fs32 col3 flex-grow-1">{{job.job_name}}</view>
						<view class="fs24 col9">{{job.refresh_date}}</view>
					</view>
					<view class="fs28 col4 pt10 pb20">{{job.salary_text}}</view>
					<view class="info_type">
						<view>{{job.city.name}}<text class="black_cir"></text>{{job.district?job.district.name:""}}
						</view><text class="black_line"></text>
						<view>招{{job.num}}人</view><text class="black_line"></text>
						<view>{{job.education_level.name}}</view><text class="black_line"></text>
						<view>{{job.type==1?'全职':'兼职'}}</view>
					</view>
					<view class="flex-box mt30 pt30 bt">
						<view class="clearfix flex-grow-1 tags">
							<view class="welfare_item">{{job.work_experience.name}}</view>
							<view class="welfare_item" v-for="benefit in job.benefits">{{benefit.name}}</view>
						</view>
						<view class="type_more">
							<image src="@/static/public/type_more.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>

				<view class="poster_info flex-box">
					<view class="header_img">
						<image :src="cdnurl(job.user.avatar)" :lazy-load="true" mode="aspectFill"></image>
					</view>
					<view class="flex-grow-1">
						<view class="fs30 col3 fwb">{{job.job_info.contact_person}}</view>
						<view class="fs28 col3 mt10">{{job.job_info.contact_phone}}</view>
					</view>
				</view>
				<view class="col0 fs34 fwb mtb30 lh48">职位详情</view>

				<view class="detail_item">
					<view class="describe_tit">职位介绍</view>
					<view class="describe_text">
						<text user-select>
							{{job.job_info.responsibility || ''}}
						</text>
					</view>
				</view>
				<view class="detail_item" v-if="job.red_packet_instruction">
					<view class="describe_tit">补贴说明</view>
					<view class="describe_text">
						<text>
							{{job.red_packet_instruction}}
						</text>
					</view>
				</view>

				<view class="detail_item flex-box">
					<image src="@/static/public/tip.png" mode="aspectFit" class="tip"></image>
					<view class="flex-grow-1 tip_con">
						警示：以招聘为名收取培训费用、提供培训贷款，或在录用过程中需支付体验、服装、押金等费用的，都属违法行为。一经发现，请
						<text @click="group_id !=2?bindInformJob():''">立即举报</text>，并向当地公安机关报案。
					</view>
				</view>

				<view class="detail_item">
					<view class="flex-box" @click="bindGoCompany">
						<image :src="cdnurl(job.enterpriseinfo.logo)" mode="aspectFill" class="ico77"></image>
						<view class="flex-grow-1 plr20">
							<view class="fwb fs32 col3 m-ellipsis">
								{{job.enterpriseinfo.full_name||job.enterpriseinfo.company_name}}
							</view>
							<view class="fs22 col9 mt5">招{{job.num}}人 |
								{{job.education_level.name || ''}} | {{job.type==1?'全职':'兼职'}}
							</view>
						</view>
						<image src="@/static/public/arrow_right.png" mode="aspectFill" class="ico22"></image>
					</view>
					<map class="map" v-if="job.locations[0].lat!=0" id="map" :enable-scroll="false"
						:longitude="job.locations[0].lng" :latitude="job.locations[0].lat" scale="14" :controls="true"
						:markers="markers" @markertap="bindShowLocation" @callouttap="bindShowLocation"></map>
				</view>

			</view>
		</view>
		<poster ref="post" :posterData="posterData" @pathImg="pathImg"></poster>
		<u-popup :show="showPoster" mode="center" :safeAreaInsetBottom="false" @close="closeShow" bgColor="transparent">
			<view class="popup">
				<image :src="postUrl" mode="aspectFill" show-menu-by-longpress="true" class="poster_img"></image>
				<view class="share_btn_link flex-box flex-between">

					<button open-type="share" class="share_btn tc" hover-class="none">
						<image src="@/static/public/icon_wexin.png" mode="aspectFill"></image>
						<view>分享微信好友</view>
					</button>
					<button @click="bindShareline()" class="share_btn tc" hover-class="none">
						<image src="@/static/public/icon_friendship.png" mode="aspectFill"></image>
						<view>分享朋友圈</view>
					</button>
				</view>
			</view>
		</u-popup>
		<u-popup :show="show" bgColor="transparent" mode="top" @open="bindShareline" @close="bindClose">
			<view class="pop3">
				<image src="@/static/public/arrow-up.png" mode="aspectFill" class="arrow-up"></image>
				<view class="pop3-text tc">点击“<text>分享到朋友圈</text>”即可分享哦~</view>
			</view>

		</u-popup>
		<u-popup :show="showShareTip" bgColor="transparent" mode="center" @close="shareTip">
			<view class="tip_tc">
				<view class="tip_p">
					<view>请选择分享方式</view>
				</view>
				<view class="flex-box tip_btn">
					<view class="flex-grow-1" @click="share">分享海报</view>
					<button open-type="share" @click="shareTip" class="flex-grow-1 col4">分享小程序</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const app = getApp();
	import poster from "@/components/poster/poster.vue"
	export default {
		components: {
			poster
		},
		data() {
			return {
				
				postUrl: '',
				showPoster: false,
				jobId: 0,
				group_id: 1,
				markers: [],
				job: {
					num: 0,
					user: {
						avatar: '',
					},
					enterpriseinfo: {
						company_scale: {
							name: ''
						},
						company_properties: {
							name: ''
						}
					}
				},
				isFav: false,
				isApplying: false,
				comments: [],
				responsibility_limit: true,
				requirement_limit: true,

				posterData: {},
				show: false,
				showShareTip: false
			}
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onLoad(options) {
			
			//this.$refs.post.saveFile()
			let group_id = this.$core.getUserinfo() ? this.$core.getUserinfo().group_id : 1;
			if (options.scene) {
				let scene = decodeURIComponent(options.scene);
				let query = scene.split('&');
				options.id = query[0].split('=')[1];
			}
			this.jobId = options.id;
			this.group_id = group_id;
			this.getJobDetail();
			//core.get({url:'xilujob.interview_comment/lists',data:{job_id:this.jobId,pagesize:5},success:ret=>{this.comments = ret.data.data;this.comment_count =ret.data.total}});
			uni.$on(app.globalData.Events.UserLogin, this.eventOnUserLogin, this);
		},
		onShareAppMessage(e) {
			return {
				title: this.job.job_name
			}
		},
		onShareTimeline() {
			return {
				title: this.job.job_name
			}
		},
		methods: {
			bindShareline() {
				this.closeShow();
				this.show = true
			},
			bindClose() {
				this.show = false
			},
			getJobDetail() {
				this.$core.get({
					url: '/xilujob.job/detail',
					data: {
						job_id: this.jobId
					},
					success: ret => {
						let job = ret.data.job;
						let images = job.enterpriseinfo.environment_images;
						images = images ? images.split(',') : [];
						//工作地址
						try {
							if (job.locations[0].lat) {
								let address = job.locations[0].province.name + job.locations[0].city.name + (
										job.locations[0].district ? job.locations[0].district.name : '') + job
									.locations[0].address;
								this.markers.push({
									id: 1,
									latitude: job.locations[0].lat,
									longitude: job.locations[0].lng,
									width: 35,
									height: 35,
									callout: {
										content: address, //文本
										color: '#000000', //文本颜色
										borderRadius: 3, //边框圆角
										borderWidth: 1, //边框宽度
										borderColor: '#ffffff', //边框颜色
										bgColor: '#ffffff', //背景色
										padding: 5, //文本边缘留白
										display: "ALWAYS",
										textAlign: 'center' //文本对齐方式。有效值: left, right, center
									}
								});
							}
						} catch (e) {
							console.error(e);
						}
						this.job = job;
						this.isFav = ret.data.is_fav;
						this.isApplying = ret.data.is_applying;
						//this.images = images;
						this.user = ret.data.user;
					},
					fail: ret => {
						uni.showModal({
							title: '提示',
							content: ret.msg,
							showCancel: false,
							success(res) {
								uni.navigateBack();
							}
						});
						return false;
					}
				});
			},
			// 收藏
			bindToggleFav() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				// if(app.getUserinfo().group_id!=1) {
				//   uni.showToast({title:'请切换到个人身份',icon:'none'});
				//   return;
				// }
				let page = this;
				page.isFav = !page.isFav;
				this.$core.post({
					url: '/xilujob.job/toggle_fav',
					loading: false,
					data: {
						job_id: this.jobId
					},
					success: (ret) => {
						page.isFav = ret.data.is_fav;
						// if(this.isFav) {
						//   uni.$emit(app.globalData.Events.JobFavAdd, {job: this.job});
						// }else {
						//   uni.$emit(app.globalData.Events.JobFavRemove, {job: this.job});
						// }
					},
					fail: ret => {
						uni.showToast({
							title: '收藏失败',
							icon: 'none'
						});
						page.isFav = !page.data.isFav;
						return false;
					}
				});
			},
			//举报
			bindInformJob() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				uni.navigateTo({
					url: '/pages/user/report_detail?id=' + this.jobId
				});
			},
			//沟通
			bindContact() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				let userinfo = this.$core.getUserinfo();
				if (this.job.user_id == userinfo.id) {
					uni.showToast({
						title: '不可与自己沟通',
						icon: 'none'
					})
					return false;
				}
				let chatParams = {
					company_id: this.job.publisher_id,
					receive_user_id: this.job.user_id,
					content: this.job.id,
					to_username: this.job.user ? this.job.user.nickname : '',
					chat_type: 3, //职位沟通
				}
				uni.navigateTo({
					url: '/pages/public/chat?param=' + JSON.stringify(chatParams),
					// success(res) {
					// 	  res.eventChannel.emit('chatTransfor', chatParams)
					// }
				})
			},
			// 投递简历
			bindApply() {
				if (!this.$core.getUserinfo(true)) {
					return;
				}
				if (this.isApplying) {
					return;
				}
				this.$core.post({
					url: 'xilujob.job/apply',
					data: {
						job_id: this.jobId
					},
					success: ret => {
						//发送投递成功的消息
						//chatIM.sendMessage(this.job.user_id, ret.data.id,4);
						uni.showModal({
							title: '提示',
							content: '投递成功',
							showCancel: false
						});
						this.isApplying = true;
					},
					fail: ret => {
						if (ret.code == -1) {
							uni.showModal({
								title: '提示',
								content: '需要先完善简历，现在要去吗？',
								cancelText: '先看看',
								confirmText: '立刻完善',
								success: res => {
									if (res.confirm) {
										uni.navigateTo({
											url: '/pages/user/my_resume'
										});
									}
								}
							});
							return false;
						}
					}
				});
			},
			//企业主页
			bindGoCompany() {
				uni.navigateTo({
					url: '/pages/user/company_info?id=' + this.job.publisher_id
				});
			},

			shareTip() {
				this.showShareTip = !this.showShareTip
			},
			share() {
				this.$core.get({
					url: '/xilujob.job/poster_info/job_id/' + this.job.id,
					success: ret => {
						this.$core.setCache('temp', ret.data, 10);
						uni.navigateTo({
							url: '/pages/public/share_post2'
						})
					},
					fail:err=>{
						console.log(err);
						uni.showToast({
							icon:'none',
							title:err
						})
					}
				});
			},
			pathImg(e) {
				this.postUrl = e
			},
			closeShow() {
				this.showPoster = false
			},

			//导航
			bindShowLocation() {
				uni.openLocation({
					latitude: this.job.locations[0].lat,
					longitude: this.job.locations[0].lng,
					name: this.job.enterpriseinfo.company_name,
					address: this.job.locations[0].address,
				});
			},
			eventOnUserLogin(userinfo) {
				//this.getJobDetail();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_bg {
		height: 222rpx;
		width: 750rpx;
		background: var(--primary);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.post_info {
		width: 100%;
		background: #ffffff;
		border-radius: 18rpx;
		padding: 30rpx 30rpx 10rpx;

		.info_type {
			font-size: 24rpx;
			color: #333
		}

		.info_type view {
			display: inline-block;
			vertical-align: middle
		}

		.black_cir {
			display: inline-block;
			vertical-align: middle;
			width: 4rpx;
			height: 4rpx;
			border-radius: 50%;
			background-color: #333333;
			margin: 0 7rpx;
		}

		.black_line {
			margin-left: 13rpx;
			margin-right: 13rpx;
			width: 1rpx;
			height: 22rpx;
			display: inline-block;
			vertical-align: middle;
			background-color: #333333
		}

		.welfare_item {
			font-size: 22rpx;
			color: #999;
			float: left;
			border-radius: 8rpx;
			line-height: 39rpx;
			background-color: #F7F7F7;
			margin-right: 20rpx;
			padding: 0 15rpx;
			box-sizing: border-box;
			margin-bottom: 10rpx;
		}

		.type_more {
			padding-left: 30rpx;
		}

		.type_more image {
			width: 20rpx;
			height: 18rpx;
			display: block
		}

		.tags {
			max-height: 95rpx;
			overflow: hidden;
		}
	}

	.bt {
		border-top: 1px solid #eee;
	}

	.poster_info {
		width: 688rpx;
		height: 145rpx;
		border-radius: 18rpx;
		background: #fff;
		margin-top: 30rpx;
		padding: 0 30rpx;

		.header_img {
			width: 89rpx;
			height: 89rpx;
			display: block;
			border-radius: 50%;
			overflow: hidden;
			margin-right: 26rpx
		}

		.header_img image {
			width: 100%;
			height: 100%;
			display: block
		}
	}

	.detail_item {
		padding: 30rpx;
		margin: 0 auto 30rpx;
		background: #FFF;
		border-radius: 18rpx;
	}

	.describe_tit {
		position: relative;
		font-size: 32rpx;
		color: #000;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.describe_tit::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: 0;
		width: 136rpx;
		height: 17rpx;
		background: var(--primary);
		opacity: 0.3
	}

	.describe_tit.tit1 {
		margin: 0 0 30rpx;
		font-size: 36rpx;
	}

	.describe_tit.tit1::after {
		width: 149rpx;
		height: 14rpx;
		border-radius: 7rpx;
		background: #0167D2;
		opacity: 0.3
	}


	.describe_small_tit {
		font-size: 28rpx;
		color: #000;
		font-weight: bold;
		padding-top: 20rpx;
		padding-bottom: 10rpx;
	}

	.describe_small_tit image {
		height: 20rpx;
		margin-left: 10rpx;
	}

	.describe_text {
		font-size: 30rpx;
		color: #333;
		line-height: 1.929
	}

	.img_comp {
		margin-right: 20rpx;
		display: block;
		width: 110rpx;
		height: 110rpx;
		background: #FFFFFF;
		border-radius: 50%;
	}

	.comp_intro {

		font-size: 26rpx;
		color: #333333;
		line-height: 54rpx;
		text-align: justify;
	}

	.tip {
		width: 52rpx;
		height: 46rpx;
		display: block
	}

	.tip_con {
		font-size: 22rpx;
		color: #999;
		padding-left: 24rpx;
	}

	.tip_con text {
		color: #FF7B20
	}

	.map_con {
		height: 263rpx;
		width: 100%
	}

	.ico77 {
		width: 77rpx;
		height: 77rpx;
	}

	.map {
		width: 100%;
		height: 284rpx;
		margin-top: 30rpx;
		border-radius: 18rpx;
	}

	.ico22 {
		width: 22rpx;
		height: 22rpx;

	}

	.detail_footer {
		padding: 14rpx 30rpx;
		background-color: #fff;
	}

	.footer_img1 {
		width: 80rpx;
	}

	.footer_img1 .text {

		font-size: 24rpx;
		color: #555555;
		line-height: 26rpx;
		text-align: center;
	}

	.footer_img1 .img {
		width: 44rpx;
		height: 44rpx;
		display: block;
		margin: 0 auto 4rpx
	}

	.zbtn1 {
		margin-left: 48rpx !important;
		height: 74rpx;
		background: var(--primary1);
		border-radius: 8rpx;
		line-height: 74rpx;
		font-size: 28rpx;
		color: var(--primary);
		text-align: center;
	}

	.zbtn2 {
		margin-left: 28rpx;
		height: 74rpx;
		background: var(--primary);
		border-radius: 8rpx;
		line-height: 74rpx;
		font-size: 28rpx;
		color: #FFF;
		text-align: center;
	}

	.primary_orange {
		.zbtn1 {
			color: var(--primary);
			text-align: center;
			border-radius: 4rpx;
			border: 0;
			margin-left: 19rpx;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
		}

		.zbtn2 {
			background: var(--primary);
			color: #FFF;
			text-align: center;
			border-radius: 4rpx;
			border: 0;
			margin-left: 19rpx;
			height: 82rpx;
			line-height: 82rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}

	.poster_img {
		width: 582rpx;
		height: 858rpx;
	}

	.popup {
		width: 582rpx;
		margin-left: auto;
		margin-right: auto;

		.share_btn_link {
			margin-top: 110rpx;
			padding: 0 66rpx;
		}

		.share_btn {
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 37rpx;
			width: 160rpx;

			image {
				width: 114rpx;
				height: 114rpx;
				display: block;
				margin-left: auto;
				margin-right: auto;
				margin-bottom: 20rpx;
			}
		}
	}

	.pop3 {
		padding-top: 22rpx;
		position: absolute;
		top: 0;
		right: 102rpx;
	}

	.pop3 .arrow-up {
		width: 130rpx;
		height: 130rpx;
		display: block;
		margin-left: auto;
		margin-right: 0;
	}

	.pop3 .pop3-text {
		width: 320rpx;
		font-size: 24rpx;
		color: #fff;
		padding-top: 26rpx;
	}

	.pop3 .pop3-text text {
		font-size: 28rpx;
		color: var(--primary);
	}
	.tip_tc {
	
		background-color: #fff;
		font-size: 30rpx;
		color: #000;
		text-align: center;
		width: 520rpx;
		border-radius: 20rpx;
		overflow: hidden
	}
	
	.tip_tc image {
		width: 81rpx;
		height: 81rpx;
		display: block;
		margin: 0 auto
	}
	
	.zz {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		text-align: center
	}
	
	.tip_p {
		padding: 52rpx 60rpx;
	}
	
	.tip_tc button {
		height: 90rpx;
		line-height: 90rpx;
		font-size: 33rpx;
	}
	
	.tip_btn {
		line-height: 90rpx;
		border-top: 1rpx solid #E1E1E1
	}
	
	.tip_btn view:nth-child(2) {
		border-left: 1rpx solid #E1E1E1
	}
</style>